<template>
  <div id="zb_app">
    <!-- 卡片视图区域 -->
    <el-card>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" >
      <el-breadcrumb-item :to="{ path: '/index/home' }">后台首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/goods/new1' }">商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑 -->

    <!-- 搜索表单 form -->
    <el-form class="demo-form-inline" :inline="true" style="margin-top:15px;">
      <el-form-item>
        <el-input placeholder="搜索商品" v-model="keyword">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-form-item>
      <!-- 添加商品 -->
      <el-form-item>
        <el-button type="primary" @click="addGoods = true">添加商品</el-button>
      </el-form-item>
    </el-form>
    <!-- 搜索表单 form -->

    <!-- 添加商品弹框-->
    <el-dialog title="添加用户" :visible.sync="addGoods">
      <el-form>
        <!-- 商品名称 -->
        <el-form-item label="商品名称" label-width="80px">
          <el-input placeholder="输入名称" v-model="name" />
        </el-form-item>
        <!-- 商品价格 -->
        <el-form-item label="商品价格" label-width="80px">
          <el-input placeholder="输入价格" v-model="price" />
        </el-form-item>
        <!-- 商品库存 -->
        <el-form-item label="商品库存" label-width="80px">
          <el-input placeholder="输入库存" v-model="number" />
        </el-form-item>
        <!-- 商品分类 -->
        <el-form-item label="商品分类" label-width="80px">
          <el-input placeholder="输入分类" v-model="cate" />
        </el-form-item>
      </el-form>
      <!-- 是否添加 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="addGoods = false">取 消</el-button>
        <el-button type="primary" @click="zb_add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加商品弹框-->

    <!-- 表格 -->
    <el-table :data="goods" height="250" border style="width: 100%">
      <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
      <el-table-column prop="price" label="商品价格"></el-table-column>
      <el-table-column prop="number" label="商品库存"></el-table-column>
      <el-table-column prop="cate" label="商品分类"></el-table-column>
      <el-table-column prop label="操作" width="200">
        <!-- 插槽 修改 -->
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="primary" size="small" @click="zb_edit(scope.row)"></el-button>
          <!-- 删除 -->
          <el-button icon="el-icon-delete" type="danger" size="small" @click="zb_del(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->

    <!--修改用户的基本信息-->
    <el-dialog title="修改商品" :visible.sync="goodsEditShow">
      <el-form :model="edits">
        <!-- 商品名称 -->
        <el-form-item label="商品名称" label-width="80px">
          <el-input placeholder="输入名称" v-model="edits.name" />
        </el-form-item>
        <!-- 商品价格 -->
        <el-form-item label="商品价格" label-width="80px">
          <el-input placeholder="输入价格" v-model="edits.price" />
        </el-form-item>
        <!-- 商品库存-->
        <el-form-item label="商品库存" label-width="80px">
          <el-input placeholder="输入库存" v-model="edits.number" />
        </el-form-item>
        <!-- 商品分类-->
        <el-form-item label="商品分类" label-width="80px">
          <el-input placeholder="输入分类" v-model="edits.cate" />
        </el-form-item>
      </el-form>
      <!-- 是否修改 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="zb_qx">取 消</el-button>
        <el-button type="primary" @click="zb_qd">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改用户的基本信息-->
    <!--分页-->
    <div class="block">
      <el-pagination
        @size-change="changeSize"
        @current-change="changePage"
        :current-page="pagenum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
      ></el-pagination>
    </div>
    <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
//引入bottstrap样式
import "@/assets/bootstrap.css";

export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {  },
  // 组件状态值
  data() {
    return {
      keyword: "", //搜索关键字
      addGoods: false, //默认弹框
      goodsList: [], //数据源
      name: "", //商品名称
      price: "", //商品价格
      number: "", //商品库存
      cate: "", //商品分类
      // 修改用户的状态值
      goodsEditShow: false,
      // 修改用户保存的数据
      edits: {
        id: 0,
        name: "",
        price: "",
        number: "",
        cate: ""
      },
      totals: 0,
      pagenum: 1, //第几页
      pagesize: 2 //每页显示的数据条数
    };
  },
  // 计算属性
  computed: {
    //模糊搜索使用
    goods() {
      let goods = this.goodsList;
      goods = goods.filter(item => {
        return item.name.indexOf(this.keyword) > -1;
      });
      let start = (this.pagenum - 1) * this.pagesize;
      let end = start + this.pagesize;
      this.totals = goods.length;
      return goods.slice(start, end);
    }
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //获取本地存储
    getList() {
      let data = localStorage.getItem("goods");
      //判断本地存储内容为空
      if (data == null) {
        this.goodsList = [];
      } else {
        //否则使用本地存储
        this.goodsList = JSON.parse(data);
      }
    },
    //添加商品
    zb_add() {
      if (
        this.name == "" ||
        this.price == "" ||
        this.number == "" ||
        this.cate == ""
      ) {
        alert("内容不能为空");
        return false;
      }
      this.goodsList.push({
        name: this.name,
        price: this.price,
        number: this.number,
        cate: this.cate
      });
      this.name = "";
      this.price = "";
      this.number = "";
      this.cate = "";
      //添加到本地存储中去  stringify()json字符串
      localStorage.setItem("goods", JSON.stringify(this.goodsList));
      this.addGoods = false;
      this.getList();
    },
    //删除
    zb_del(row) {
      this.goodsList.splice(row, 1);
      //添加到本地存储中去  stringify()json字符串
      localStorage.setItem("goods", JSON.stringify(this.goodsList));
      this.getList();
    },
    // 修改
    zb_edit(row) {
      //控制编辑弹框的显示
      this.goodsEditShow = true;
      //把当前选中的用户的信息赋给edits
      this.edits = row;
    },
    //取消修改
    zb_qx() {
      this.goodsEditShow = false; //关闭弹框
      this.getList();
    },
    //确认修改
    zb_qd() {
      localStorage.setItem("goods", JSON.stringify(this.goodsList));
      this.goodsEditShow = false; //关闭弹框
    },
    //改变每页显示条数的时候触发
    changeSize(pagesize) {
      console.log(pagesize);
      //改变pagesize的值，调用列表数据
      this.pagesize = pagesize;
      this.getList();
    },
    //改变页码的时候触发的事件
    changePage(page) {
      console.log(page);
      //改变当前页码数，调用列表数据
      this.pagenum = page;
      this.getList();
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   *
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {
    this.getList();
  },
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style lang="scss" scoped>
</style>
